<template>
  <div class="post-detail-container">
    <div v-if="post" class="post-detail">
      <h1>{{ post.title }}</h1>
      <div class="post-meta">
        <span>作者: {{ post.author.username }}</span>
        <span>发布时间: {{ formatDate(post.created_at) }}</span>
        <span>分类: {{ post.category.name }}</span>
        <span v-if="!post.allow_comment" class="comment-disabled">评论已关闭</span>
      </div>
      <div class="post-content" v-html="post.content"></div>
      <div class="post-stats">
        <span>评论: {{ post.comments }}</span>
      </div>

      <!-- 评论区 -->
      <div class="comments-section">
        <h2>评论 ({{ comments.length }})</h2>
        <div class="comment-form" v-if="post.allow_comment">
          <textarea v-model="commentContent" placeholder="写下你的评论..."></textarea>
          <button @click="submitComment">提交评论</button>
        </div>
        <div v-else class="comment-disabled-message">
          该帖子已关闭评论功能
        </div>
        <div class="comments-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-user">
              <img :src="comment.author_avatar || '/default-avatar.png'" alt="用户头像">
              <span>{{ comment.author_nickname || '匿名用户' }}</span>
            </div>
            <div class="comment-content" v-html="comment.content"></div>
            <div class="comment-time">{{ formatDate(comment.created_at) }}</div>
            <div class="comment-actions">
              <button @click="deleteComment(comment.id)" class="delete-button">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="loading">加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { circleApi } from '@/api'
import { formatDate } from '@/utils/date'

const route = useRoute()
const postId = route.params.id
const post = ref(null)
const comments = ref([])
const commentContent = ref('')

// 超级增强版JSON解析函数，支持多层嵌套和复杂格式
const safeJsonParse = (str, defaultValue = {}) => {
  try {
    if (typeof str !== 'string') {
      return str || defaultValue
    }

    // 移除可能的前后空格和包裹的引号
    str = str.trim()
    if (str.startsWith('"') && str.endsWith('"')) {
      str = str.slice(1, -1)
    }
    
    // 如果字符串为空，返回默认值
    if (!str) {
      return defaultValue
    }

    // 尝试直接解析（基本情况）
    try {
      return JSON.parse(str)
    } catch (e) {
      console.log('第一次解析失败，尝试清理字符串:', str)
      
      // 处理常见的转义问题
      str = fixEscapedCharacters(str)
      
      // 尝试再次解析
      try {
        return JSON.parse(str)
      } catch (e2) {
        // 如果仍然失败，尝试提取JSON部分
        const extractedJson = extractJsonFromText(str)
        if (extractedJson) {
          try {
            return JSON.parse(extractedJson)
          } catch (e3) {
            console.warn('提取JSON后解析仍失败:', e3)
          }
        }
      }
      
      return defaultValue
    }
  } catch (e) {
    console.warn('解析JSON失败:', e)
    return defaultValue
  }
}

// 修复字符串中的转义字符问题
const fixEscapedCharacters = (str) => {
  // 处理转义的引号
  str = str.replace(/\\"/g, '"')
  // 处理转义的反斜杠
  str = str.replace(/\\\\/g, '\\')
  // 处理其他可能的转义问题
  str = str.replace(/\\n/g, '\n').replace(/\\r/g, '\r').replace(/\\t/g, '\t')
  return str
}

// 从文本中提取JSON部分
const extractJsonFromText = (text) => {
  const jsonPatterns = [
    // 尝试匹配JSON对象
    /(?:^|\s)(\{\s*"[^{}]*\})(?:$|\s|,)/,
    // 尝试匹配JSON数组
    /(?:^|\s)(\[\s*\{\s*"[^{}]*\}\s*(?:,\s*\{\s*"[^{}]*\}\s*)*\])(?:$|\s|,)/,
    // 更复杂的嵌套JSON对象
    /(?:^|\s)(\{(?:[^{}]|\{[^{}]*\})*\})(?:$|\s|,)/,
    // 更复杂的嵌套JSON数组
    /(?:^|\s)(\[(?:[^\[\]]|\[(?:[^\[\]]|\[(?:[^\[\]]|\[.*\])*\])*\])*\])(?:$|\s|,)/
  ]
  
  for (const pattern of jsonPatterns) {
    const match = text.match(pattern)
    if (match && match[1]) {
      console.log('提取到的JSON部分:', match[1])
      return match[1]
    }
  }
  
  // 如果没有找到，尝试找到第一个{和最后一个}
  const firstBrace = text.indexOf('{')
  const lastBrace = text.lastIndexOf('}')
  if (firstBrace !== -1 && lastBrace !== -1 && firstBrace < lastBrace) {
    const potentialJson = text.substring(firstBrace, lastBrace + 1)
    console.log('尝试从{到}提取:', potentialJson)
    return potentialJson
  }
  
  return null
}

// 深度清理JSON对象中的嵌套内容
const deepCleanJson = (obj) => {
  if (!obj || typeof obj !== 'object') {
    return obj
  }
  
  // 递归处理数组
  if (Array.isArray(obj)) {
    return obj.map(item => deepCleanJson(item))
  }
  
  // 处理对象
  const cleanedObj = {}
  
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      let value = obj[key]
      
      // 如果值是字符串但看起来像JSON，尝试解析
      if (typeof value === 'string' && 
          (value.includes('{') || value.includes('['))) {
        const parsed = safeJsonParse(value, value)
        if (parsed !== value) { // 如果解析成功
          value = deepCleanJson(parsed)
        }
      }
      // 如果值是对象，递归清理
      else if (typeof value === 'object' && value !== null) {
        value = deepCleanJson(value)
      }
      
      cleanedObj[key] = value
    }
  }
  
  return cleanedObj
}

// 获取帖子详情
const fetchPostDetail = async () => {
  try {
    const res = await circleApi.getPostDetail(postId)
    console.log('原始帖子数据:', res)
    
    // 增强数据处理逻辑
    let postData = res.data || res
    
    // 如果是字符串，尝试解析
    if (typeof postData === 'string') {
      postData = safeJsonParse(postData, {})
    }
    
    // 深度清理数据
    postData = deepCleanJson(postData)
    
    // 特殊处理评论数显示
    if (postData.comments) {
      // 如果comments是对象，尝试获取comment_count或count字段
      if (typeof postData.comments === 'object') {
        if (postData.comment_count !== undefined) {
          postData.comments = postData.comment_count
        } else if (postData.comments.count !== undefined) {
          postData.comments = postData.comments.count
        } else if (postData.comments.list && Array.isArray(postData.comments.list)) {
          postData.comments = postData.comments.list.length
        } else {
          postData.comments = 0
        }
      }
      // 如果是字符串，尝试提取数字
      else if (typeof postData.comments === 'string') {
        const commentsCount = parseInt(postData.comments, 10)
        postData.comments = isNaN(commentsCount) ? 0 : commentsCount
      }
    } else {
      postData.comments = 0
    }
    
    post.value = postData
    console.log('处理后的帖子数据:', postData)
  } catch (error) {
    console.error('获取帖子详情失败:', error)
  }
}

// 获取评论列表
const fetchComments = async () => {
  try {
    const res = await circleApi.getPostComments(postId)
    console.log('原始评论数据:', res)
    
    // 获取可能的评论数据
    let rawComments = []
    
    // 尝试从不同位置获取评论数据
    if (res && res.data && res.data.results) {
      rawComments = res.data.results
    } else if (res && res.data && res.data.list) {
      rawComments = res.data.list
    } else if (res && res.data) {
      rawComments = res.data
    } else if (res) {
      rawComments = res
    }
    
    // 处理字符串类型的响应
    if (typeof rawComments === 'string') {
      // 特殊处理常见的JSON字符串情况
      if (rawComments.startsWith('{') && rawComments.endsWith('}')) {
        // 对象类型，包装成数组
        const parsed = safeJsonParse(rawComments, {})
        rawComments = [parsed]
      } else if (rawComments.startsWith('[') && rawComments.endsWith(']')) {
        // 数组类型，直接解析
        rawComments = safeJsonParse(rawComments, [])
      } else {
        // 其他情况，尝试提取JSON部分
        const parsed = safeJsonParse(rawComments, [])
        rawComments = Array.isArray(parsed) ? parsed : [parsed]
      }
    }
    
    // 确保是数组
    if (!Array.isArray(rawComments)) {
      rawComments = [rawComments]
    }
    
    // 深度清理所有评论数据
    const cleanedComments = deepCleanJson(rawComments)
    console.log('深度清理后的评论数据:', cleanedComments)
    
    // 处理每个评论项
    comments.value = cleanedComments.map((comment, index) => {
      // 递归清理和解析评论对象
      const cleanComment = cleanCommentObject(comment, index)
      return cleanComment
    })
    
    console.log('最终处理后的评论数据:', comments.value)
  } catch (error) {
    console.error('获取评论失败:', error)
    comments.value = []
  }
}

// 递归清理评论对象
const cleanCommentObject = (comment, index) => {
  console.log('处理评论项[', index, ']:', comment)
  
  // 如果是字符串，尝试解析
  if (typeof comment === 'string') {
    // 尝试不同的解析策略
    let parsedComment = safeJsonParse(comment, {})
    
    // 如果解析后还是字符串，创建一个新对象
    if (typeof parsedComment === 'string') {
      // 尝试从字符串中提取有用信息
      const extractedInfo = extractCommentInfoFromText(parsedComment)
      parsedComment = extractedInfo || { content: parsedComment }
    }
    
    comment = parsedComment
  }
  
  // 确保comment是对象
  if (typeof comment !== 'object' || comment === null) {
    comment = {}
  }
  
  // 提取评论内容，处理嵌套情况
  let content = extractCommentContent(comment)
  
  // 提取作者信息
  let authorNickname = extractAuthorNickname(comment)
  let authorAvatar = extractAuthorAvatar(comment)
  let createdAt = extractCreatedAt(comment)
  let commentId = extractCommentId(comment, index)
  
  // 为了保留删除按钮功能，这里不进行用户身份验证
  let isCurrentUser = false
  
  // 返回格式化后的评论对象
  const formattedComment = {
    id: commentId,
    content: content,
    author_nickname: authorNickname,
    author_avatar: authorAvatar,
    created_at: createdAt
  }
  
  console.log('格式化后的评论项:', formattedComment)
  return formattedComment
}

// 从评论对象中提取内容
const extractCommentContent = (comment) => {
  // 如果content字段存在
  if (comment.content) {
    // 如果content是对象，尝试提取有意义的字符串内容
    if (typeof comment.content === 'object' && comment.content !== null) {
      // 如果是对象，尝试获取其内部的content字段
      if (comment.content.content && typeof comment.content.content === 'string') {
        return comment.content.content
      }
      // 尝试获取其他可能的文本字段
      for (const key in comment.content) {
        if (typeof comment.content[key] === 'string' && comment.content[key].length > 0) {
          return comment.content[key]
        }
      }
      // 如果无法提取，返回简短提示而不是完整JSON
      return '[内容对象]'
    } 
    // 如果content是字符串但包含JSON结构，尝试解析
    else if (typeof comment.content === 'string' && 
             (comment.content.includes('{') || comment.content.includes('['))) {
      const parsedContent = safeJsonParse(comment.content, comment.content)
      // 如果解析后是对象，尝试获取其中的文本内容
      if (typeof parsedContent === 'object' && parsedContent !== null) {
        if (parsedContent.content && typeof parsedContent.content === 'string') {
          return parsedContent.content
        }
        for (const key in parsedContent) {
          if (typeof parsedContent[key] === 'string' && parsedContent[key].length > 0) {
            return parsedContent[key]
          }
        }
        return '[内容文本]'
      }
      return parsedContent
    }
    // 普通字符串内容
    else {
      return comment.content
    }
  }
  
  // 如果没有content字段，尝试从对象中提取有用信息
  return '无内容'
}

// 从文本中提取评论信息
const extractCommentInfoFromText = (text) => {
  try {
    // 尝试匹配常见的评论格式
    let contentMatch = text.match(/"content":"([^"]*)"/)
    let authorMatch = text.match(/"author_nickname":"([^"]*)"/)
    let avatarMatch = text.match(/"author_avatar":"([^"]*)"/)
    let timeMatch = text.match(/"created_at":"([^"]*)"/)
    
    const result = {};
    if (contentMatch && contentMatch[1]) result.content = contentMatch[1]
    if (authorMatch && authorMatch[1]) result.author_nickname = authorMatch[1]
    if (avatarMatch && avatarMatch[1]) result.author_avatar = avatarMatch[1]
    if (timeMatch && timeMatch[1]) result.created_at = timeMatch[1]
    
    return Object.keys(result).length > 0 ? result : null
  } catch (e) {
    console.warn('提取评论信息失败:', e)
    return null
  }
}

// 提取作者昵称
const extractAuthorNickname = (comment) => {
  // 尝试从不同字段名获取作者昵称
  const nicknameFields = ['author_nickname', 'author_username', 'nickname', 'username', 'author', 'user', 'name']
  for (const field of nicknameFields) {
    if (comment[field]) {
      // 如果作者字段是对象，尝试从对象中获取用户名
      if (typeof comment[field] === 'object' && comment[field] !== null) {
        // 检查对象中的常见用户名属性
        const userProps = ['nickname', 'username', 'name', 'fullname']
        for (const prop of userProps) {
          if (comment[field][prop]) {
            return comment[field][prop]
          }
        }
        // 如果没有找到具体属性，返回对象的字符串表示
        return String(comment[field])
      }
      return comment[field]
    }
  }
  return '未知用户'
}

// 提取作者头像
const extractAuthorAvatar = (comment) => {
  // 尝试从不同字段名获取作者头像
  const avatarFields = ['author_avatar', 'avatar', 'user_avatar', 'profile_picture', 'image']
  for (const field of avatarFields) {
    if (comment[field]) {
      return comment[field]
    }
  }
  return '/default-avatar.png'
}

// 提取创建时间
const extractCreatedAt = (comment) => {
  // 尝试从不同字段名获取创建时间
  const timeFields = ['created_at', 'create_time', 'time', 'date', 'timestamp']
  for (const field of timeFields) {
    if (comment[field]) {
      return comment[field]
    }
  }
  return new Date().toISOString()
}

// 提取评论ID
const extractCommentId = (comment, index) => {
  // 尝试从不同字段名获取ID
  const idFields = ['id', 'comment_id', 'uid', '_id']
  for (const field of idFields) {
    if (comment[field]) {
      return comment[field]
    }
  }
  return index + 1
}

// 提交评论
const submitComment = async () => {
  if (!post.value?.allow_comment) {
    alert('该帖子已关闭评论功能')
    return
  }
  
  if (!commentContent.value.trim()) {
    alert('评论内容不能为空')
    return
  }

  try {
    await circleApi.createPostComment(postId, { content: commentContent.value })
    commentContent.value = ''
    fetchComments() // 重新获取评论
    // 刷新帖子详情以更新评论数
    await fetchPostDetail()
  } catch (error) {
    console.error('提交评论失败:', error)
    alert('提交评论失败，请稍后重试')
  }
}

// 删除评论
const deleteComment = async (commentId) => {
  if (!confirm('确定要删除这条评论吗？')) {
    return
  }

  try {
    await circleApi.deleteComment(commentId)
    // 重新获取评论列表和帖子详情
    fetchComments()
    await fetchPostDetail()
    alert('评论删除成功')
  } catch (error) {
    console.error('删除评论失败:', error)
    alert('删除评论失败，请稍后重试')
  }
}

// 页面加载时执行
onMounted(() => {
  fetchPostDetail()
  fetchComments()
})
</script>

<style scoped>
.post-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.post-detail h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.post-content {
  margin-bottom: 24px;
  line-height: 1.6;
}

.post-stats {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.comments-section {
  margin-top: 32px;
}

.comment-form {
  margin-bottom: 24px;
}

.comment-form textarea {
  width: 100%;
  height: 100px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 12px;
}

.comment-form button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  position: relative;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.comment-user img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 12px;
}

.comment-content {
  color: #000;
  margin-bottom: 8px;
}

.comment-time {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.comment-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* 调试信息样式 */
.debug-info {
  font-size: 11px;
  color: #666;
  margin-left: 8px;
  font-style: italic;
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
}

.delete-button {
  padding: 4px 12px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.delete-button:hover {
  background-color: #ff7875;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}
</style>